<template>
  <el-popover
  placement="right"
  width="400"
  trigger="click">
    <div class="icon-list">
        <i  v-for="icon in elIcons" 
            :key="icon" 
            :class="['el-icon-'+icon,'el-icons',{selected:'el-icon-'+icon===selected}]"
            @click="selectIcon">
        </i>
    </div>
    <div slot="reference" class="icon_reference">
        <i :class="[selected,'preview_icon']"></i>
        <el-button size="mini" type="primary" plain>选择图标</el-button>
    </div>
</el-popover>
</template>

<script>
import elIcons from './element-icons'
export default {
    props:{
        icon: String
    },
    data(){
        return {
            elIcons: elIcons,
            selected: this.icon
        }
    },
    methods:{
        selectIcon(e){
            const icon = e.target ? e.target.classList[0] : e.srcElement.classList[0]
            this.selected = icon === this.selected?'':icon
            this.$emit('update:icon',this.selected)
        }
    },
    watch: {
        icon(){
            this.selected = this.icon
        }
    }
}
</script>

<style scoped>
    .icon-list{
        height: 180px;
        overflow: auto;
    }
    .el-icons{
        font-size: 24px;
        padding: 5px
    }
    .el-icons:hover{
        color: #3a8ee6;
        cursor: pointer;
    }
    .selected{
        color: #3a8ee6;
    }
    .icon_reference{
        display: inline;
    }
    .preview_icon{
        font-size:24px;
        vertical-align:middle;
        margin-right:10px;
    }
</style>